<template>
    <div class="uc-menu menu-background">
      <ul>
        <li 
          v-for="(item, index) in menuItems" 
          :key="index" 
          @click="selectMenu(item)"
          :class="{ 'active': selectedMenu === item }" 
          tabindex="0"  <!-- 使其可通过键盘导航 -->
          @keydown.enter="selectMenu(item)"  <!-- 支持键盘选择 -->
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      menuItems: {
        type: Array,
        required: true,
      },
    },
    data() {
      return {
        selectedMenu: null,  // 选中的菜单项
      };
    },
    methods: {
      selectMenu(item) {
        this.selectedMenu = item;  // 设置选中菜单项
        this.$emit('itemSelected', item);
      },
    },
  };
  </script>
  
  <style scoped>
  .uc-menu {
    flex: 0.5; 
  }
  
  .uc-menu ul {
    list-style-type: none;
    padding: 0;
  }
  
  .uc-menu li {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;  /* 过渡效果 */
  }
  
  .uc-menu li:hover {
    background-color: #eaeaea;
  }
  
  .uc-menu li.active {  /* 选中状态样式 */
    background-color: #d3d3d3;
    font-weight: bold;  /* 加粗 */
  }
  </style>
  